<template>
  <div class="main" v-show="loading">
    <div class="someInfo">

      <div class="zhanghu_box">
        <div class="head">
          <img src="../../assets/zhanghuxinxi.svg" />
          <span>账户信息</span>
        </div>
        <div class="content">
          <div class="rowData">
            <div class="left">
              <div class="key">
                当前账户类型为：
              </div>
              <div v-if="!user.bUserVip || user.bUserVip.id==''" class="value" style="color: #2489d1;">
                免费版<div class="shengji" @click="$router.push('/admin/upgradeAccount')">(<img
                    src="../../assets/img/shengjihuiyuan.svg">升级会员)</div>
              </div>
              <div v-if="user.bUserVip && user.bUserVip.id!=''" class="value" style="color: #2489d1;">
                会员版({{user.bUserVip.name}})
              </div>

              <!-- 会员到期前14天到到期后30天显示此提示信息 -->
              <div class="tishi" v-if="isShow">
                <span v-if="leftShow">您的会员权限将在{{leftDay}}天后到期，请合理安排</span>
                <span v-if="!leftShow">您的会员权限已于{{user.bUserVip.validateDate}}过期，请</span>
                <span class="xufei" @click="$router.push('/admin/upgradeAccount')">续费</span>。
              </div>

            </div>
          </div>
          <div class="bingtu">

            <div class="bt">
              <div class="top">
                <img src="../../assets/keshiyongzhanghao.svg" />
                <span>学习总人次</span>
              </div>
              <div class="bottom">
                <el-progress :width="100" type="circle" :percentage="memberCount/MAX_MEMBER*100"
                  :format="setItemText(memberCount,MAX_MEMBER)"></el-progress>
              </div>
            </div>

            <div class="bt">
              <div class="top">
                <img src="../../assets/zuidabingfarenshu.svg" />
                <span>最大同时在线人数</span>
              </div>
              <div class="bottom">
                <el-progress :width="100" type="circle" :percentage="onlineCount/MAX_ONLINE*100"
                  :format="setItemText(onlineCount,MAX_ONLINE)"></el-progress>
              </div>
            </div>

            <div class="bt">
              <div class="top">
                <img src="../../assets/edu.svg" />
                <span>课程总数</span>
              </div>
              <div class="bottom">
                <el-progress :width="100" type="circle" :percentage="courseCount/MAX_COURSE*100"
                  :format="setItemText(courseCount,MAX_COURSE)"></el-progress>
              </div>
            </div>

          </div>
        </div>
      </div>

      <div class="yonghu_box">
        <div class="head">
          <img src="../../assets/yonghuxinxi.svg" />
          <span>用户信息</span>
        </div>
        <div class="content">
          <div class="rowData">
            <div class="left">
              <div class="key">用户名</div>
              <div class="value">{{user.name}}</div>
            </div>
            <div class="right"><span @click="setName" class="set">设置用户名</span></div>
          </div>
          <div class="rowData">
            <div class="left">
              <div class="key">账号ID</div>
              <div class="value">{{user.id}}</div>
            </div>
          </div>
          <div class="rowData">
            <div class="left">
              <div class="key">账户类型</div>

              <div v-if="!user.bUserVip || user.bUserVip.id==''" class="value">
                免费版<div class="shengji" @click="$router.push('/admin/upgradeAccount')">(<img
                    src="../../assets/img/shengjihuiyuan.svg">升级会员)</div>
              </div>
              <div v-if="user.bUserVip && user.bUserVip.id!=''" class="value" style="color: #2489d1;">
                会员版({{user.bUserVip.name}})
              </div>
            </div>
          </div>
          <div class="rowData">
            <div class="left">
              <div class="key">手机号码</div>
              <div class="value">{{user.loginName}}</div>
            </div>
            <div class="right">
              已验证，<span @click="dialogFormVisible = true" class="set">更换手机号</span>
            </div>

          </div>
          <div class="rowData">
            <div class="left">
              <div class="key">密码</div>
              <div class="value">
              </div>
            </div>
            <div class="right">
              <span @click="editPassword" class="set">修改密码</span>
            </div>
          </div>
        </div>
      </div>

      <div class="dingdan_box">
        <div class="head">
          <img src="../../assets/dingdan.svg" />
          <span>订单信息</span>
        </div>
        <div class="content">

          <el-table height="400" :resizable="false" :data="tableData" :border="false" style="width: 100%;">
            <el-table-column prop="orderNo" label="订单序号"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="150"> </el-table-column>
            <el-table-column prop="orderPrice" label="订单金额"> </el-table-column>
            <el-table-column prop="operation" label="订单操作">
              <template slot-scope="scope">
                <el-button @click="$router.push('/admin/myOrder')" type="text" size="small">查看详情</el-button>
                <!-- <el-button @click="$router.push('/admin/myOrder?orderNo='+scope.row.orderNo)" type="text" size="small">查看详情</el-button> -->
              </template>
            </el-table-column>
          </el-table>

        </div>
      </div>


    </div>

    <div class="fanhui">
      <el-button @click="$router.push('/admin/index')" size="small" type="primary" plain>
        返&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回
      </el-button>
    </div>

    <el-dialog custom-class="duihuakuang" title="更换手机号" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :model="form">

        <el-form-item label="新手机号码" :label-width="formLabelWidth">
          <el-input maxlength="11" show-word-limit v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="验证码" :label-width="formLabelWidth">
          <el-input maxlength="6" show-word-limit v-model="form.code" autocomplete="off"></el-input>
          <el-button type="primary" plain @click="getCode" style="margin-top: 10px;">{{countMes}}</el-button>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePhone">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    Notification
  } from 'element-ui';
  import qs from 'qs'
  export default {
    data() {
      return {
        leftShow: false,
        leftDay: '',
        loading: false,
        isShow: false,
        timer: null,
        count: "",
        countMes: "获取验证码",
        dialogFormVisible: false,
        form: {
          phone: '',
          code: '',
        },
        formLabelWidth: '120px',
        MAX_COURSE: 5,
        MAX_MEMBER: 30,
        MAX_ONLINE: 20,
        courseCount: 2,
        memberCount: 1,
        onlineCount: 0,
        user: {
          email: ''
        },
        socket: "",
        tableData: [{
          orderNo: '20201258',
          createTime: '2021-10-8 20:20:20',
          orderPrice: '1999元',
          payStatus: '',
          payStatusLabel: '待支付',
        }, ]
      };
    },
    created() {
      this.getInfo();
      this.getUserLimit();
      this.getOrderInfo();
    },
    methods: {
      getOrderInfo() {
        let that = this;
        let params = {
          pageNo: 1,
          pageSize: 10,
        }
        let url = this.tools.yonghufuwu + '/order/listOrder?' + qs.stringify(params);
        this.$axios.$get(url).then(function(response) {
          let data = response.data;
          data.forEach((item) => {
            item.orderPrice = item.orderPrice + '/元'
          })
          that.tableData = data;
        }).catch(function(error) {
          console.log(error);
        })
      },
      //获取重置密码功能的验证码
      getCode() {
        var that = this;
        if (this.form.phone == "") {
          Notification.warning({
            title: '提示',
            message: "请输入手机号"
          })
        } else if (!(/^1[3456789]\d{9}$/.test(this.form.phone))) {
          Notification.warning({
            title: '提示',
            message: "请输入正确的手机号"
          })
        } else {
          let TIME_COUNT = 60;
          that.countMes = "60S"
          if (!that.timer) {
            console.log(666)
            that.count = TIME_COUNT;
            that.timer = setInterval(() => {
              if (that.count > 0 && that.count <= TIME_COUNT) {
                that.count--;
                var countMes = that.count + "S";
                that.countMes = countMes;
              } else {
                that.countMes = "获取验证码";
                clearInterval(that.timer);
                that.timer = null;
              }
            }, 1000)
          }
          this.$axios.$get(this.tools.sanfangfuwu + '/sms?mobile=' + this.form.phone).then(function(response) {
            Notification.success({
              title: '提示',
              message: "短信已发送"
            })
          }).catch(function(error) {
            that.countMes = "获取验证码";
            clearInterval(that.timer);
            that.timer = null;
            console.log(error);
          })
        }

      },
      //更换手机号
      changePhone() {
        let that = this;
        if (this.form.phone == "") {
          Notification.warning({
            title: '提示',
            message: "请输入手机号"
          });
          return;
        } else if (!(/^1[3456789]\d{9}$/.test(this.form.phone))) {
          Notification.warning({
            title: '提示',
            message: "请输入正确的手机号"
          });
          return;
        } else if (this.form.code == "") {
          Notification.warning({
            title: '提示',
            message: "请输入短信验证码"
          });
          return;
        } else if (!(/^\d{6}$/.test(this.form.code))) {
          Notification.warning({
            title: '提示',
            message: "验证码为6位数字"
          });
          return;
        }

        var params = {
          mobile: this.form.phone,
          mobileCode: this.form.code
        };
        this.$axios.$post(this.tools.yonghufuwu + '/user/changeMobile?' + qs.stringify(params))
          .then(res => {
            this.dialogFormVisible = false
            this.$message({
              type: 'success',
              message: '修改手机号成功'
            });
            this.user.loginName = this.form.phone;
          }).catch(e => {});
      },
      //账号信息
      getUserLimit() {
        this.$axios.$get(this.tools.yonghufuwu + '/user/getUserLimit')
          .then(res => {
            let data = res.data;
            this.MAX_COURSE = data.MAX_COURSE;
            this.MAX_MEMBER = data.MAX_MEMBER;
            this.MAX_ONLINE = data.MAX_ONLINE;
            this.courseCount = data.courseCount;
            this.memberCount = data.memberCount;
            this.onlineCount = data.onlineCount;
            this.loading = true;
          }).catch(e => {});
      },
      // 自定义进度条文字
      setItemText(sign, all) {
        return () => {
          return sign + '/' + all;
        }
      },
      getInfo() {
        this.$axios.$get(this.tools.yonghufuwu + '/user/getInfo')
          .then(res => {
            this.user = res.data;
            if (this.user.bUserVip.id != '') {
              let endTime = Date.parse(new Date(this.user.bUserVip.validateDate));
              let nowTime = Date.parse(new Date(res.currentTime));
              let day = ((endTime - nowTime) / (1000 * 3600 * 24));
              if (day < 15 && day > -31) {
                this.isShow = true;
              }
              if (day < 0) {
                this.leftShow = false;
              } else {
                this.leftShow = true;
                this.leftDay = parseInt(day);
              }
            }
          }).catch(e => {});
      },
      setName() {
        this.$prompt('请输入用户名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          inputPattern: /^[\S]{1,15}$/,
          inputErrorMessage: '用户名不能超过15位'
        }).then(({
          value
        }) => {
          var params = {
            name: value
          };
          this.$axios.$post(this.tools.yonghufuwu + '/user/saveInfo?' + qs.stringify(params))
            .then(res => {
              this.$message({
                type: 'success',
                message: '修改用户名成功'
              });
              this.user.name = value;
              this.$parent.getInfo()
            }).catch(e => {});

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      setEmail() {
        this.$prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确',
          closeOnClickModal: false,
        }).then(({
          value
        }) => {
          var params = {
            email: value
          };
          this.$axios.$post(this.tools.yonghufuwu + '/user/saveInfo?' + qs.stringify(params))
            .then(res => {
              this.user.email = value;
              this.$message({
                type: 'success',
                message: '修改邮箱成功'
              });
            }).catch(e => {});

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      jieBangPhone() {
        this.$confirm('此操作将解绑该手机, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false,
        }).then(() => {
          this.$message({
            type: 'success',
            message: '解绑成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消解绑'
          });
        });
      },
      editPassword() {
        this.$prompt('请输入密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'password',
          closeOnClickModal: false,
          inputPattern: /^(?=.*[a-zA-z].*)(?=.*[\d].*).{8,30}$/,
          inputErrorMessage: '密码须为8-30位，字母+数字'
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '邮箱格式不正确'
        }).then(({
          value
        }) => {
          var v1 = value
          this.$prompt('请再次输入密码', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputType: 'password',
            closeOnClickModal: false,
            // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
            // inputErrorMessage: '邮箱格式不正确'
          }).then(({
            value
          }) => {
            var v2 = value;
            console.log(v1, 123)
            console.log(v2, 456)
            if (v1 == v2) {
              var params = {
                newPassword: v1
              }
              this.$axios.$post(this.tools.yonghufuwu + '/user/saveInfo?' + qs.stringify(params))
                .then(res => {
                  this.$message({
                    type: 'success',
                    message: '修改密码成功'
                  });
                }).catch(e => {});
            } else {
              this.$message({
                type: 'success',
                message: '两次密码不一致，请重新修改'
              });
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
    }
  }
</script>

<style lang="less" scoped="scoped">
  .main {
    padding: 0 20px;
    width: 100%;
    overflow-y: auto;

    .someInfo {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .yonghu_box {
        width: 48%;
        height: 300px;
        background-color: white;
        margin-bottom: 20px;

        // margin-right: 50px;
        .head {
          display: flex;
          align-items: center;
          width: 100%;
          height: 56px;
          background-color: #effaff;
          padding: 0 10px;
          color: #101010;

          img {
            width: 24px;
            height: 24px;
            margin-right: 5px;
          }

          span {
            color: #101010;
            font-size: 14px;
          }
        }

        .content {
          width: 100%;
          height: calc(100% - 60px);
          display: flex;
          flex-direction: column;
          // justify-content: space-evenly;
          justify-content: space-between;

          &:before,
          &:after {
            content: '';
            display: block;
          }

          padding: 0 20px 0px 10px;
          font-size: 14px;

          .rowData {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .left {
              display: flex;

              .set {
                color: #0000D0;
                text-decoration: underline;
                cursor: pointer;
              }

              .key {
                width: 80px;
                color: #b8b4b1;
                // margin-right: 20px;
              }

              .value {
                display: flex;

                .shengji {
                  cursor: pointer;
                  display: flex;
                  align-items: center;
                  color: #f56c6c;

                  img {
                    width: 17px;
                    height: 17px;
                  }
                }
              }
            }

            .right {
              .set {
                color: #0000D0;
                text-decoration: underline;
                cursor: pointer;
              }
            }


          }
        }
      }

      .dingdan_box {
        width: 48%;
        height: 300px;
        background-color: white;
        margin-left: 20px;
        margin-bottom: 20px;

        .head {
          display: flex;
          align-items: center;
          width: 100%;
          height: 56px;
          background-color: #effaff;
          padding: 0 10px;
          color: #101010;

          img {
            width: 24px;
            height: 24px;
            margin-right: 5px;
          }

          span {
            color: #101010;
            font-size: 14px;
          }
        }

        .content {
          width: 100%;
          height: calc(100% - 60px);
          display: flex;
          flex-direction: column;
          // justify-content: space-evenly;
          justify-content: space-between;
          overflow-y: auto;

          &:before,
          &:after {
            content: '';
            display: block;
          }

          // padding: 0 20px 0px 10px;
          font-size: 14px;

          // 设置滚动条的宽度
          /deep/ .el-table__body-wrapper::-webkit-scrollbar {
            width: 8px;
            height: 8px;
          }

          // 设置滚动条的背景色和圆角
          /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
            background-color: #0076CA;
            border-radius: 8px;
          }
        }
      }

      .zhanghu_box {
        width: 100%;
        height: 250px;
        background-color: white;
        margin-bottom: 50px;

        // margin-top: 20px;
        .head {
          display: flex;
          align-items: center;
          width: 100%;
          height: 56px;
          background-color: #effaff;
          // padding: 0 10px;
          color: #101010;

          img {
            width: 24px;
            height: 24px;
            margin-right: 5px;
          }

          span {
            color: #101010;
            font-size: 14px;
          }
        }

        .content {
          width: 100%;
          height: calc(100% - 60px);
          display: flex;
          flex-direction: column;
          // justify-content: space-evenly;
          justify-content: space-between;

          &:before,
          &:after {
            content: '';
            display: block;
          }

          padding: 0 20px 0px 10px;
          font-size: 14px;

          .rowData {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .left {
              display: flex;

              .key {
                color: #b8b4b1;
                margin-right: 20px;
              }

              .tishi {
                margin-left: 10px;
                color: #f56c6c;

                .xufei {
                  cursor: pointer;
                  text-decoration: underline;
                }
              }

              .value {
                display: flex;

                .shengji {
                  cursor: pointer;
                  display: flex;
                  align-items: center;
                  color: #f56c6c;

                  img {
                    width: 17px;
                    height: 17px;
                  }
                }
              }
            }

            .right {}


          }

          .bingtu {
            display: flex;
            justify-content: space-around;

            .bt {
              width: 160px;
              // margin-right: 100px;
              display: flex;
              flex-direction: column;
              align-items: center;

              .top {
                display: flex;
                align-items: center;

                img {
                  width: 24px;
                  height: 24px;
                }

              }

              .bottom {
                ::v-deep .el-progress__text {
                  font-size: 16px !important;
                  color: #f56c6c;
                }
              }
            }
          }
        }
      }
    }

    .fanhui {
      margin-top: 50px;
      width: 100%;
      display: flex;
      justify-content: center;

      .el-button:hover {
        background-color: #0076CA;
      }
    }

    ::v-deep.el-dialog {
      width: 500px;
      border-radius: 10px;

      // height: 400px;
      .el-dialog__body {
        padding: 5px 20px;
      }

      .el-button:hover {
        background-color: #0076CA;
      }
    }

  }
</style>
